<template>
    <div>
        <div class="content">
            <el-form :model="registerForm" 
                :rules="registerRules" 
                ref="registerForm" 
                label-position="left" 
                label-width="80px" 
                class="register-form">
                <h2>基本信息</h2>

                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="registerForm.phoneNumber"
                        placeholder="请输入手机号"
                        style='width:258px;'
                        @blur='validatePhone("registerForm")'></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="verificationCode">
                    <el-input v-model="registerForm.verificationCode" 
                        placeholder="请输入短信验证码"
                        style='width:160px;'></el-input><send-code :phone='registerForm.phoneNumber' ref='code'></send-code>
                </el-form-item>

                <el-form-item label="密码" prop='password'>
                    <el-input v-model="registerForm.password"
                        placeholder="请设定密码" 
                        type="password"
                        style='width:258px;'></el-input>
                </el-form-item>

                <el-form-item label="水店名称" prop='name'>
                    <el-input v-model="registerForm.name"
                        style='width:332px;'></el-input>
                </el-form-item>

                <el-form-item label="门牌号" prop='detailAddress'>
                    <el-input v-model="registerForm.detailAddress"
                        style='width:332px;'></el-input>
                </el-form-item>

                <el-form-item label="经度" prop='longitude' style='display: none;'>
                    <el-input v-model="registerForm.longitude"></el-input>
                </el-form-item>

                <el-form-item label="维度" prop='latitude' style='display: none;'>
                    <el-input v-model="registerForm.latitude"></el-input>
                </el-form-item>

                <el-form-item label="水店地址">
                    <el-amap-search-box :on-search-result='onSearchResult'></el-amap-search-box>
                    <el-amap class='amap' vid='amap' 
                        :center='center' 
                        :events='events' 
                        :zoom='zoom'>
                        <el-amap-marker v-for='marker in markers' :position='marker'></el-amap-marker>
                    </el-amap>
                </el-form-item>
                
                <el-form-item class='btn-group'>
                    <el-button type='primary' @click='onPost("registerForm")' style='margin-left: 0px;'>提交</el-button><el-button @click='onBack' style='margin-left: 20px;'>返回登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import RegisterJs from './Register.js';
    module.exports = RegisterJs;
</script>

<style scoped lang='less'>
    @import url(Register.less);
</style>